
<template>
<div id="register">
    <h6 class="topImg"><img src="../../assets/img/login/loginbgs.png" alt=""> </h6>
    <el-form :model="loginForm" ref="dynamicValidateForm" :rules="roule" class="loginForm demo-dynamic">
        <div class="conts">
            <div class="form-top">
                <h5 style="color:#4285f4">渡头网后台管理</h5>
            </div>
            <el-form-item class="form-item-content"
            prop="name"
            >
            <img src="../../assets/img/login/userName.png" alt="" >
                <el-input v-model.trim="loginForm.name"  placeholder="用户名"  maxlength="10"></el-input>
            </el-form-item>
            <el-form-item class="form-item-content"
                prop="password"
            >
                <img src="../../assets/img/login/password.png" alt="">
                <el-input  v-model.trim="loginForm.password" placeholder="密码" type="password"  maxlength="25"></el-input>
            </el-form-item>
            <el-form-item style="margin-top:30px">
                <el-button class="btnSubmit" type="primary" @click="handleLogin('dynamicValidateForm')">登录</el-button>
            </el-form-item>
    </div>
</el-form>
</div>
</template>

<script>
import {USER_INFO} from '@/utils/common'
    export default {
        name: 'register',
        data() {
            return {
                loginForm:{
                    name:'',
                    password:'',
                    group:{
                        id:1
                    },
                },
                roule: {
                    name: [
                        { required: true, message:  '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message:  '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleLogin (formName){
                 this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.$api.login.login(this.loginForm).then(r => {
                            this.$message.success('登录成功')
                            localStorage.setItem(USER_INFO, JSON.stringify(r.data || {}))
                            setTimeout(() =>{
                                this.$router.push('/home')
                            }, 1000)
                        })
                    } else {
                        return
                    }
                 })
                
        //    this.post('api/user/login',this.loginForm).then(res=> {
        //              debugger
        //          })
        //    this.$axios({
        //        headers: {'Content-Type': 'application/json'},
        //         method: 'post',
        //         url: '/api/user/insert',
        //         data: this.loginForm,
        //         }).then(function(data){
        //             debugger
        //         })
        //    this.$router.push('/loginTab')
            },
        }
    }
</script>

<style lang="scss" scoped>
#register {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 1440px;
html,body,*{
    padding: 0;
    margin: 0;
}
.loginForm {
    width: 500px;
    height: 358px;
    border: 1px solid #eee;
    border-radius: 20px;
    background-color: #fff;
    position: relative;
    z-index: 100;
}
input{
    border: 0!important;
}
.loginForm img {
    width: 20px;
    margin-left: 18px;
}
.topImg img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
.form-top {
    width: 100%;
    margin-top: 10%;
    height: 15%;
    border-bottom: 1px solid #CCCCD1;
    text-align: center;
    font-size: 28px;
    }
 .conts {
    width: 60%;
    height: 100%;
    margin-left: 20%;
    }
.btnSubmit {
    width: 100%;
    height: 36px;
    line-height: 36px;
   background-color: #4285f4;
    border-radius: 20px;
    color: #F5EFFF;
    font-size: 22px;
    margin-top: -1%;
    outline: none;
}
 .el-input--medium {
    width:80%;
    float:right;
    border-left: 1px solid #ccc;
}
}
</style>
<style>
#register .el-input__inner {
    border: 0;
}
#register .form-item-content {
    margin-top: 30px;
    border: 1px solid #4285f4;
    border-radius: 20px;
    width: 96%;
}
#register .el-form-item__content{
    width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
